﻿




document.onkeydown = function (event) {
    var e = event || window.event || arguments.callee.caller.arguments[0];
    if (e.ctrlKey && e.keyCode == 13) { // enter 键
        sendMsg();//ctl+enter;
    }
}

var ws = new WebSocket(serverIP);

//当天聊天接受者ID
var u_reviverid = null;

//聊天缓存
var tempTalkList = [];


/**
 * 当前登录用户的身份信息
 */
var UserInfo = {
    u_name: "",
    msg_type: 0,
    u_face:null
};


/**
 * 发送消息的模型
 */
var WebChat_Msg = {
    u_msg: "",
    msg_type: 0,
    u_rid: null,
    u_sid: null
}


$(document).ready(function () {
    screenFuc();
});


/**
 *通过CooKie获取用户名 发送消息 获取用户列表
 * @returns {} 
 */
function getUserList() {
    UserInfo = (JsonPar(getCookie('UserInfo')));
    if (UserInfo == null) {
        window.location = "login.html";
    }
    if (UserInfo.u_name == "") {
        window.location = "login.html";
    } else {
        setCookie("UserInfo", null, -1);
        UserInfo.msg_type = 3;//获取用户列表
        ws.send(JSON.stringify(UserInfo));
    }
}


/**
 * 连接成功后
 * @returns {} 
 */
ws.onopen = function () {
    connectOK();
};


/**
 * 连接断开
 * @returns {} 
 */
ws.onclose = function () {
    connectClose();
};


/**
 * 接受消息
 * @param {} event 
 * @returns {} 
 */
ws.onmessage = function (event) {
    var result = JSON.parse(event.data);
    console.log("获取返回参");
    console.log(result);
    if (result != null) {
        if (result.code == 200) {
            switch (result.type) {
                case 0: //接受文字消息
                    console.log("接受文字消息:");
                    //需要判断当前是否在聊天窗口
                    if ($(".chatBox-kuang").css("display") == "block") { //如果对话框打开；追加
                        console.log("对话框状态是打开的：");
                        appendTalk(result.data, 1,0);//消息内容；消息类型（1；接受的；0是自己发送的）
                    } else {
                        console.log("对话框状态是关闭的：");
                        haveNewMsg(result.data.u_sid);
                    }
                    //聊天记录列表
                    tempTalkList.push({
                        u_sid: result.data.u_sid,//发送者ID；谁发给我的；我要记住
                        u_rid: UserInfo.u_id,//接受者ID
                        u_msg: result.data.u_msg,
                        u_face: result.data.u_face,
                        msg_type:0,//文字消息
                        addtype: 1//这个是收消息的；所以；头像要在左侧
                    });
                    break;
                case 1://表情消息
                    console.log("接受表情消息:");
                    //需要判断当前是否在聊天窗口
                    if ($(".chatBox-kuang").css("display") == "block") { //如果对话框打开；追加
                        console.log("对话框状态是打开的：");
                        appendTalk(result.data, 1, 1);//消息内容；消息类型（1；接受的；0是自己发送的）
                    } else {
                        console.log("对话框状态是关闭的：");
                        haveNewMsg(result.data.u_sid);
                    }
                    //聊天记录列表
                    tempTalkList.push({
                        u_sid: result.data.u_sid, //发送者ID；谁发给我的；我要记住
                        u_rid: UserInfo.u_id, //接受者ID
                        u_msg: result.data.u_msg,
                        u_face: result.data.u_face,
                        msg_type: 1,//表情消息
                        addtype: 1//这个是收消息的；所以；头像要在左侧
                    });
                    break;
                case 2://图片消息
                    console.log("接受图片消息消息:");
                    //需要判断当前是否在聊天窗口
                    if ($(".chatBox-kuang").css("display") == "block") { //如果对话框打开；追加
                        console.log("对话框状态是打开的：");
                        appendTalk(result.data, 1, 2);//消息内容；消息类型（1；接受的；0是自己发送的）;消息类型;0-文字;1-表情;2-图片
                    } else {
                        console.log("对话框状态是关闭的：");
                        haveNewMsg(result.data.u_sid);
                    }
                    //聊天记录列表
                    tempTalkList.push({
                        u_sid: result.data.u_sid, //发送者ID；谁发给我的；我要记住
                        u_rid: UserInfo.u_id, //接受者ID
                        u_msg: result.data.u_msg,
                        u_face: result.data.u_face,
                        msg_type: 2,//图片消息
                        addtype: 1//这个是收消息的；所以；头像要在左侧
                    });
                    break;

                case 3: //返回用户列表
                    console.log("返回用户列表:");
                    loadUserList(result.data);
                    break;

            }
        }
    }
};


/**
 * 接受消息后；标记有 新消息提示
 * @param {} tempRid 
 * @returns {} 
 */
function haveNewMsg(tempRid) {
    $(".message-num").each(function () {
        if ($(this).attr("u_id") == tempRid) {
            $(this).html("●");
            $(this).css("padding", "");
        }
    });
}


/**
 * 遍历出在线用户列表
 * @param {} userList 
 * @returns {} 
 */
function loadUserList(userList) {

    console.log("获取用户在线列表");
    console.log(userList);
    $(".chatBox-list").html('');
    var htmlUserList = '';

    //有用户发生变化后；寻找 正在聊天的ID；是否存在；如果不存在； 就证明他下线了；
    var isTalkOffline = 0;//正在聊天的是否下线

    for (var i = 0; i < userList.length; i++) {

        //根据用户名找到自己ID 不合理----------------
        if (userList[i].u_name == UserInfo.u_name) {
            UserInfo.u_id = userList[i].u_id;
            $("#myName").text(userList[i].u_name);
            $("#myFace>img").attr("src", userList[i].u_face);
            //把自己放在特殊位置
        } else {
            htmlUserList +=
          `<div class="chat-list-people" onclick="showTalk(this)" u_id="${userList[i].u_id}" >
                        <div>
                            <img src="${userList[i].u_face}" alt="头像">
                        </div>
                        <div class="chat-name">
                            <p>${userList[i].u_name}</p>
                        </div>
                        <div class ="message-num" u_id="${userList[i].u_id}"  style="padding: 0px;"></div>
             </div>`;
        }

        if (u_reviverid == userList[i].u_id) {
            //找到了正在聊天的
            isTalkOffline = 1;
        }
    }

    if (isTalkOffline == 0 && u_reviverid!=null) {
        errorSnackbar("对方离线了");
        setTimeout(backUserList(), 5* 1000);
    }
    $(".chatBox-list").html(htmlUserList);
}


/**
 * 连接成功后的方法
 * @returns {} 
 */
function connectOK() {
    $("#isOnline").html("登陆成功");
    console.log("连接成功");
    getUserList();//连接成功后发送自己的消息

}


/**
 * 链接失败后的方法
 * @returns {} 
 */
function connectClose() {
    $("#isOnline").html("网络断开");
    console.log("链接断开");
}


/**
 * 进入聊天页面
 * @param {} me 
 * @returns {} 
 */
function showTalk(me) {
    u_reviverid = $(me).attr("u_id");
    if (u_reviverid == UserInfo.u_id) {//判断是否和自己聊天
        alert("别和自己聊天了，笨蛋");
    } else {


        //清空有信息消息提醒
        $(".message-num").each(function () {
            if ($(this).attr("u_id") == u_reviverid) {
                $(this).html('');
                $(this).css("padding", 0);
            }
        });

        $(".chatBox-head-one").toggle();
        $(".chatBox-head-two").toggle();
        $(".chatBox-list").fadeToggle();
        $(".chatBox-kuang").fadeToggle();

        //传名字
        $(".ChatInfoName").text($(me).children(".chat-name").children("p").eq(0).html());

        //传头像
        $(".ChatInfoHead>img").attr("src", $(me).children().eq(0).children("img").attr("src"));

        $(".chatBox-content-demo").html(''); //先清空聊天记录

        if (tempTalkList != null) {
            for (var i = 0; i < tempTalkList.length; i++) {

                switch (tempTalkList[i].addtype) {
                case 0: //发送 发送者==发送者ID 并且 接受这id==当天聊天的ID;才会遍历
                    if (tempTalkList[i].u_sid == UserInfo.u_id && tempTalkList[i].u_rid == u_reviverid) {
                        appendTalk(tempTalkList[i], tempTalkList[i].addtype, tempTalkList[i].msg_type);
                    }
                    break;
                case 1: //接受
                    if (tempTalkList[i].u_sid == u_reviverid) {
                        appendTalk(tempTalkList[i], tempTalkList[i].addtype, tempTalkList[i].msg_type);
                    }
                    break;
                }

            }
        }

        //聊天框内容默认最底部
        $(document).ready(function() {
            $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
        });
    }

}


/**
 * 发送文本消息
 * @returns {} 
 */
function sendMsg() {
    var temp = { u_msg: $(".div-textarea").html().replace(/[\n\r]/g, '<br>'), u_face: UserInfo.u_face };
    if (temp.u_msg != "") {
        appendTalk(temp, 0, 0);
        //发送后清空输入框
        $(".div-textarea").html("");
        WebChat_Msg.u_rid = u_reviverid;//接受者id
        WebChat_Msg.u_msg = temp.u_msg;//消息内容
        WebChat_Msg.u_sid = UserInfo.u_id;//发送者id
        WebChat_Msg.u_face = UserInfo.u_face;//用户头像
        WebChat_Msg.msg_type = 0;//发送的文字
        console.log("发送的消息：");
        console.log(WebChat_Msg);

        tempTalkList.push({
            u_sid: UserInfo.u_id,//发送者ID；谁发给我的；我要记住
            u_rid: u_reviverid,//接受者ID
            u_msg: temp.u_msg,
            u_face: UserInfo.u_face,
            msg_type: 0,
            addtype: 0//这个是发送；所以；头像要在右侧
        });

        ws.send(JSON.stringify(WebChat_Msg));
    }
}


/**
 * 发送表情消息
 * @param {} face 
 * @returns {} 
 */
function sendFace(face) {
    var temp = { u_msg: face, u_face: UserInfo.u_face };
    if (temp.u_msg != "") {
        appendTalk(temp, 0, 1);
        WebChat_Msg.u_rid = u_reviverid; //接受者id
        WebChat_Msg.u_msg = face; //消息内容
        WebChat_Msg.u_sid = UserInfo.u_id; //发送者id
        WebChat_Msg.u_face = UserInfo.u_face; //用户头像
        WebChat_Msg.msg_type = 1; //发送的文字
        console.log("发送的表情：");
        console.log(WebChat_Msg);

        tempTalkList.push({
            u_sid: UserInfo.u_id, //发送者ID；谁发给我的；我要记住
            u_rid: u_reviverid, //接受者ID
            u_msg: face,
            u_face: UserInfo.u_face,
            msg_type: 1, //表情
            addtype: 0 //这个是发送；所以；头像要在右侧
        });
        //发送后关闭表情框
        $(".biaoqing-photo").toggle();
        ws.send(JSON.stringify(WebChat_Msg));
    }
}


/**
 * 发送图片消息
 * @param {} img 
 * @returns {} 
 */
function sendImg(img) {
    var temp = { u_msg: img, u_face: UserInfo.u_face };
    if (temp.u_msg != "") {
        appendTalk(temp, 0, 2);
        WebChat_Msg.u_rid = u_reviverid; //接受者id
        WebChat_Msg.u_msg = img; //消息内容
        WebChat_Msg.u_sid = UserInfo.u_id; //发送者id
        WebChat_Msg.u_face = UserInfo.u_face; //用户头像
        WebChat_Msg.msg_type = 2; //发送的文字
        console.log("发送的图片：");
        console.log(WebChat_Msg);

        tempTalkList.push({
            u_sid: UserInfo.u_id, //发送者ID；谁发给我的；我要记住
            u_rid: u_reviverid, //接受者ID
            u_msg: img,
            u_face: UserInfo.u_face,
            msg_type: 2, //图片
            addtype: 0 //这个是发送；所以；头像要在右侧
        });
        ws.send(JSON.stringify(WebChat_Msg));
    }
}

//追加Talk
//addtype；0;是发件人；在右侧；1；收件人 在左侧
//msg_type;
function appendTalk(data, addtype, msg_type) {
    console.log("追加消息");
    console.log(data);
    var myDate = new Date();
    var htmlStr = '';
    switch (addtype) {
        case 0://发送人
            switch (msg_type) {
                case 0://文字消息
                    htmlStr = ` <div class ="clearfloat"> <div class ="author-name"><small class ="chat-date">${(myDate.toLocaleString())}</small>
                    </div>
                        <div class ="right">
                            <div class ="chat-message"> ${data.u_msg}</div>
                            <div class ="chat-avatars">
                                <img src="${data.u_face}" alt="头像">
                            </div>
                            </div>
                        </div>`;

                    break;
                case 1://表情消息
                     htmlStr = ("<div class=\"clearfloat\">" +
                           "<div class=\"author-name\"><small class=\"chat-date\">" + myDate.toLocaleString() + "</small> </div> " +
                           "<div class=\"right\"> <div class=\"chat-message\"> " + data.u_msg + " </div> " +
                           "<div class=\"chat-avatars\"><img src=\"" + data.u_face+ "\" alt=\"头像\" /></div> </div> </div>");
                     break;
                case 2://图片消息
                    htmlStr=("<div class=\"clearfloat\">" +
                               "<div class=\"author-name\"><small class=\"chat-date\">" + myDate.toLocaleString() + "</small> </div> " +
                               "<div class=\"right\"> <div class=\"chat-message\"><img src=" + data.u_msg + "></div> " +
                               "<div class=\"chat-avatars\"><img src=\"" + data.u_face+ "\" alt=\"头像\" /></div> </div> </div>");
                    break;
            }
            break;
        case 1://接收人
            switch (msg_type) {
                case 0: //文字消息
                    htmlStr = ` <div class="clearfloat">
                            <div class="author-name">
                                <small class ="chat-date">${(myDate.toLocaleString())}</small>
                            </div>
                        <div class="left">
                            <div class="chat-avatars">
                                <img src="${data.u_face}" alt="头像">
                            </div>
                            <div class="chat-message">
                                ${data.u_msg}
                            </div>
                        </div>
                        </div>`;
                    break;
                case 1://表情消息
                    htmlStr = "<div class=\"clearfloat\">" +
                          "<div class=\"author-name\"><small class=\"chat-date\">" + myDate.toLocaleString() + "</small> </div> " +
                          "<div class=\"left\">" +
                          "<div class=\"chat-avatars\"><img src=\"" + data.u_face + "\" alt=\"头像\" /></div> <div class=\"chat-message\"> " + data.u_msg + " </div>  </div> </div>";
                    break;
                case 2://图片消息
                    htmlStr = ("<div class=\"clearfloat\">" +
                               "<div class=\"author-name\"><small class=\"chat-date\">" + myDate.toLocaleString() + "</small> </div> " +
                               "<div class=\"left\"> " +
                               "<div class=\"chat-avatars\"><img src=\"" + data.u_face + "\" alt=\"头像\" /></div><div class=\"chat-message\"><img src=" + data.u_msg + "></div>  </div> </div>");
                    break;
            }
  
            break;
    }

    $(".chatBox-content-demo").append(htmlStr);
    //聊天框默认最底部
    $(document).ready(function () {
        $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
    });
}


//发送文字信息
$("#chat-fasong").click(function () {
    sendMsg();
});


//为每个表情图标赋予事件;点击后;传参到聊天内容里
$(".emoji-picker-image").each(function () {
    $(this).click(function () {
        var face = $(this).parent().html();
        sendFace(face);//发送表情
        //聊天框默认最底部
        $(document).ready(function () {
            $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
        });
    });
});


//发送图片
function selectImg(pic) {
    if (!pic.files || !pic.files[0]) {
        return;
    }
    var reader = new FileReader();
    reader.onload = function (evt) {
        var images = evt.target.result;
        sendImg(images);
        //聊天框默认最底部
        $(document).ready(function () {
            $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
        });
    };
    reader.readAsDataURL(pic.files[0]);
}


/**
 * 文本框点击后 滚动到最底部
 * @returns {} 
 */
function text_Click() {
    $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);

}

//返回列表
$(".chat-return").click(function () {
    backUserList();
});


function backUserList() {
    $(".chatBox-head-one").toggle(1);
    $(".chatBox-head-two").toggle(1);
    $(".chatBox-list").fadeToggle(1);
    $(".chatBox-kuang").fadeToggle(1);
    u_reviverid = null;//返回到列表后 清空聊天的对象

}

//打开聊天窗口 右下角的按钮
$(".chatBtn").click(function () {
    $(".chatBox").toggle(10);
});


//聊天窗口的关闭
$(".chat-close").click(function () {
    $(".chatBox").toggle(10);
});

//发送表情 表情框的显示和隐藏
$("#chat-biaoqing").click(function () {
    $(".biaoqing-photo").toggle();
});

//空白处点击 隐藏表情选择框
$(document).click(function () {
    $(".biaoqing-photo").css("display", "none");
});


$("#chat-biaoqing").click(function (event) {
    event.stopPropagation();//阻止事件
});


(window.onresize = function () {
    screenFuc();
})();


/**
 * 返回用户列表
 * @returns {} 
 */
function backToList() {
   
}


function screenFuc() {
    var topHeight = $(".chatBox-head").innerHeight();//聊天头部高度
    //屏幕小于768px时候,布局change
    var winWidth = $(window).innerWidth();
    if (winWidth <= 768) {
        var totalHeight = $(window).height(); //页面整体高度
        $(".chatBox-info").css("height", totalHeight - topHeight);
        var infoHeight = $(".chatBox-info").innerHeight();//聊天头部以下高度
        //中间内容高度
        $(".chatBox-content").css("height", infoHeight - 46);
        $(".chatBox-content-demo").css("height", infoHeight - 46);

        $(".chatBox-list").css("height", totalHeight - topHeight);
        $(".chatBox-kuang").css("height", totalHeight - topHeight);
        $(".div-textarea").css("width", winWidth - 106);
    } else {
        $(".chatBox-info").css("height", 495);
        $(".chatBox-content").css("height", 448);
        $(".chatBox-content-demo").css("height", 448);
        $(".chatBox-list").css("height", 495);
        $(".chatBox-kuang").css("height", 495);
        $(".div-textarea").css("width", 260);
    }
}



//var connectTimer = setInterval(function () {
//    console.log("begin:");
//    if (ws.readyState == ws.CLOSED) {
//        connectClose();
//    }
//    if (ws.readyState == ws.OPEN) {
//        connectOK();
//    }
//},1000);
